<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="cardCont">
				<view class="cardTop">
					<view class="workName">
						<view>{{formData.watercraft_area}} {{formData.position_name}}</view>
						<view class="workTag" v-if="formData.position_type==2">急聘</view>
					</view>
					<view class="workMoney">
						<text v-if="formData.start_monry=='0'">面议</text>
						<text v-else>{{formData.start_monry}}~{{formData.end_monry}}{{formData.unit==1?'元':'美元'}}</text>
					</view>
				</view>
				<view class="workInfo">
					<view class="workInfoItem">发布时间：{{formData.create_time}}</view>
					<view class="workInfoItem hasLeft" v-if="false">浏览：{{formData.views}}</view>
				</view>
				<view class="cardMain">
					<view class="cardMainItem" v-if="formData.hygk">
						<view class="cardMainName">招募港口</view>
						<view>{{formData.hygk}}</view>
					</view>
					<view class="cardMainItem" v-if="formData.watercraft_zcsj">
						<view class="cardMainName">造船年份</view>
						<view>{{formData.watercraft_zcsj}}年</view>
					</view>
					<view class="cardMainItem" v-if="formData.watercraft_colors">
						<view class="cardMainName">所属船旗</view>
						<view>{{formData.watercraft_colors}}</view>
					</view>
					<view class="cardMainItem" v-if="formData.watercraft_type">
						<view class="cardMainName">船舶类型</view>
						<view>{{formData.watercraft_type}}</view>
					</view>
					<view class="cardMainItem" v-if="formData.watercraft_num">
						<view class="cardMainName">载货量</view>
						<view>{{formData.watercraft_num+formData.watercraft_dw}}</view>
					</view>
					<view class="cardMainItem" v-if="formData.scsj">
						<view class="cardMainName">上船时间</view>
						<view>{{formData.scsj}}</view>
					</view>
					<view class="cardMainItem">
						<view class="cardMainName">招聘人数</view>
						<view>{{formData.zprs}}人</view>
					</view>
					<view class="cardMainItem">
						<view class="cardMainName">录用人数</view>
						<view>{{formData.ylq_num}}人</view>
					</view>
				</view>
			</view>
			<view class="cardCont" v-if="formData.gwfl">
				<view class="stepHead hasTop">岗位福利</view>
				<view class="workTags">
					<view class="tagItem" :key="index2" v-for="(item2,index2) in formData.gwfl.split(',')">{{item2}}</view>
				</view>
			</view>
			<view class="cardCont">
				<view class="stepHead">岗位要求</view>
				<view class="cardMain blockCont">
					<view class="cardMainItem">
						<view class="cardMainName">证书等级</view>
						<view>{{formData.zsdj||'不限'}}</view>
					</view>
					<view class="cardMainItem">
						<view class="cardMainName">名企背景</view>
						<view>
							<text v-if="formData.mqbj==1">国企</text>
							<text v-if="formData.mqbj==2">知名企业</text>
							<text v-if="formData.mqbj==3">不限</text>
						</view>
					</view>
					<view class="cardMainItem">
						<view class="cardMainName">学历要求</view>
						<view>{{formData.xlyq||'不限'}}</view>
					</view>
					<view class="cardMainItem">
						<view class="cardMainName">国籍要求</view>
						<view>{{formData.gjyq||'不限'}}</view>
					</view>
					<view class="cardMainItem">
						<view class="cardMainName">语言能力</view>
						<view>{{formData.yynl||'不限'}}</view>
					</view>
					<view class="cardMainItem">
						<view class="cardMainName">年龄要求</view>
						<view>{{formData.nlyq||'不限'}}</view>
					</view>
					<view class="cardMainItem">
						<view class="cardMainName">工作经验</view>
						<view>{{formData.gzjy||'不限'}}</view>
					</view>
				</view>
			</view>
			<view class="cardCont" v-if="formData.gwms">
				<view class="stepHead">岗位详情</view>
				<view class="orderInfo">
				    {{ converData.changeLine(formData.gwms) }}
				</view>
			</view>
			<view class="companyCont">
				<view class="comImg">
					<image :src="formData.enterprise_logo"></image>
				</view>
				<view class="comInfo">
					<view class="comName">{{formData.enterprise_name}}</view>
					<view class="comText">{{formData.enterprise_person}} · {{mdPhone()}}</view>
				</view>
				<view class="telBtn" @click="comHomeFn">企业主页</view>
			</view>
			<view class="cardCont">
				<view class="stepHead">小贴士</view>
				<view class="reportTip">
					求职过程中请勿缴纳任何保证金，若发现岗位涉及虚假、不实请立即<text class="reportText" @click="showReport = true">立即举报</text>
				</view>
			</view>
			<view class="underFlex">
				<view v-if="formData.is_collect==1" class="saveBtn iconfont icon-shoucang1" @click="saveFn"></view>
				<view v-if="formData.is_collect==2" class="saveBtn iconfont icon-w_aixin" @click="cancelSaveFn"></view>
				<view class="ctrlGroup">
					<view @click="telFn" :class="formData.is_deliver==2?'ctrlBtn fullBtn has_bg':'ctrlBtn'">电话咨询</view>
					<view class="ctrlBtn has_bg" v-if="formData.is_deliver==1" @click="signFn">立即报名</view>
				</view>
			</view>
		</view>
		<u-popup :show="showReport" @close="showReport = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" mode="bottom" :round="10">
			<view class="reportCont">
				<view class="reportValue">
					<textarea v-model="report_content" placeholder="请详细描述举报信息" ></textarea>
				</view>
				<view class="reportBtn" @click="sureReport">确认举报</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<load v-if="!showCont"></load>
		<subLoad v-if="showSub"></subLoad>
		<u-modal :show="showModal" :showCancelButton="true" @cancel="showModal = false" title="温馨提示" @confirm="modalSure"  :content='modalCont'></u-modal>
	</view>
</template>

<script>
	import converData from "@/utils/converData";
	import load from '@/components/load.vue'
	import subLoad from '@/components/sub.vue'
	import api from '@/http/api.js'
	export default {
		components:{load,subLoad},
		data() {
			return {
				showSub:false,
				showCont:false,
				converData:converData,
				showModal:false,
				showReport:false,
				report_content:'',
				modalCont:'',
				detailId:'',
				
				formData:{},
				share:{
				   title: '鲸领航系统分享',
				   imageUrl:'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
				}
			};
		},
		methods:{
			comHomeFn(){
				uni.navigateTo({
					url: '../comHome/comHome?id='+this.formData.enterprise_position_id+'&enterprise_id='+this.formData.enterprise_id+'&is_deliver='+this.formData.is_deliver
				});
			},
			sureReport(){
				let data = {
					enterprise_position_id:this.detailId,
					report_content:this.report_content,
				}
				this.showSub = true
				api.getRequst(data,'/api/Index/positionReport').then((res)=>{
					if(res.code==1){
						this.$refs.uToast.show({
							message:'举报成功',
						})
						this.report_content = ''
						this.getData()
						this.showSub = false
						this.showReport = false
					}
				})
			},
			mdPhone(){
				return this.formData.enterprise_mobile.replace(
				  /(\d{3})\d{4}(\d{4})/,
				  "$1****$2"
				);
			},
			modalSure(){
				uni.navigateTo({
					url: '/pages/user/book/book'
				});
			},
			telFn(){
				if(this.formData.is_deliver==1){
					this.showModal = true
					this.modalCont = '请先完善简历再联系此岗位。'
				}else{
					uni.makePhoneCall({
						phoneNumber:this.formData.enterprise_mobile,
					})
				}
			},
			signFn(){
				let data = {
					enterprise_position_id:this.detailId,
				}
				this.showSub = true
				api.getRequst(data,'/api/Index/throwPosition').then((res)=>{
					if(res.code==1){
						this.$refs.uToast.show({
							message:'报名成功',
						})
						this.getData()
					}else{
						if(res.msg == '请先完善简历'){
							this.showModal = true
							this.modalCont = '请先完善简历再进行投递。'
						}else if(res.msg == '不可重复投递') {
							this.$refs.uToast.show({
								message:'你已投递过此岗位',
							})
						}else{
							this.$refs.uToast.show({
								message:res.msg,
							})
						}
					}
					this.showSub = false
				})
			},
			cancelSaveFn(){
				let data = {
					enterprise_position_id:this.detailId,
				}
				this.showSub = true
				api.getRequst(data,'/api/Index/qxCollectPosition').then((res)=>{
					if(res.code==1){
						this.$refs.uToast.show({
							message:'取消收藏成功',
						})
						this.getData()
						this.showSub = false
					}
				})
			},
			saveFn(){
				let data = {
					enterprise_position_id:this.detailId,
				}
				this.showSub = true
				api.getRequst(data,'/api/Index/collectPosition').then((res)=>{
					if(res.code==1){
						this.$refs.uToast.show({
							message:'收藏成功',
						})
						this.getData()
					}
					this.showSub = false
				})
			},
			getData(){
				let data = {
					enterprise_position_id:this.detailId,
				}
				api.getRequst(data,'/api/Index/positionDetails').then((res)=>{
					if(res.code==1){
						this.formData = res.data
						this.share.title =res.data.position_name+"|"+res.data.hygk+'|'+res.data.watercraft_area
					}
					this.showCont = true
				})
			}
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		onShareTimeline(res) {//分享到朋友圈
			return {
				title: this.share.title,
				imageUrl: this.share.imageUrl,
			}
		},
		onLoad(option) {
			this.detailId = option.id
			this.getData()
		},
	}
</script>

<style lang="scss">
	.showCont{
		padding-top: 30rpx;
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #f6f7f9;
		padding-bottom: 140rpx;
		.cardCont{
			width: 92%;
			margin: 0 auto;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;
			position: relative;
			
			.cardTop{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.workName{
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 32rpx;
					.workTag{
						padding: 5rpx 20rpx;
						font-size: 24rpx;
						// border: 1px solid #f56c6c;
						// background-color: ;
						background-image: linear-gradient(to right, #f56c6c,#ebc0b4);
						color: #fff;
						// margin-left: 10rpx;
						border-radius: 20rpx 0 20rpx 0;
						transform: scale(0.85);
					}
				}
				.workMoney{
					font-size: 28rpx;
					color: #3f55cc;
				}
			}
			.workInfo{
				margin-top: 15rpx;
				display: flex;
				align-items: center;
				color: #999;
				font-size: 24rpx;
				.hasLeft{
					margin-left: 20rpx;
				}
			}
			.cardMain{
				margin-top: 30rpx;
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;
				justify-content: space-between;
				.cardMainItem{
					width: 48%;
					margin-bottom: 15rpx;
					font-size: 28rpx;
					color: #000;
					display: flex;
					font-weight: normal;
					.cardMainName{
						color: #666;
						width: 120rpx;
						
						margin-right: 15rpx;
					}
				}
				.cardMainItem view:last-child{
					width: 100rpx;
					flex: 1;
				}
			}
			.cardUnder{
				border-top: 1px dashed #ddd;
				padding-top: 30rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #666;
				.underItem{
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					.underItemNum{
						font-size: 32rpx;
						color: #000;
					}
				}
			}
			.stepHead{
				font-size: 30rpx;
				font-weight: bold;
			}
			.hasTop{
				margin-bottom: 30rpx;
			}
			.workTags{
				display: flex;
				margin: 10rpx 0;
				flex-wrap: wrap;
				.tagItem{
					margin-bottom: 15rpx;
					padding: 5rpx 20rpx;
					background-color:#dae3fb;
					color: #3f55cc;
					font-size: 26rpx;
					border-radius: 0rpx 25rpx 0rpx 0rpx;
					margin-right: 20rpx;
				}
			}
			.orderInfo{
				margin-top: 30rpx;
				white-space: pre-wrap;
			}
			.reportTip{
				margin-top: 30rpx;
				.reportText{
					color: #3f55cc;
					text-decoration: underline;
				}
			}
		}
		.companyCont{
			padding: 30rpx;
			width: 92%;
			margin: 0 auto;
			margin-bottom: 30rpx;
			background-image: linear-gradient(to right bottom,#89afff,#3f55cc);
			color: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			.comImg{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #fff;
				font-size: 0;
				padding: 5rpx;
				overflow: hidden;
				box-sizing: border-box;
				margin-right: 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.comInfo{
				flex: 1;
				width: 100rpx;
				.comName{
					width: 100%;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 32rpx;
					font-weight: bold;
				}
				.comText{
					color: #fff;
					margin-top: 10rpx;
				}
			}
			.telBtn{
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				border-radius: 6rpx;
				border: 1px solid #fff;
				margin-left: 10rpx;
			}
		}
	}
	.underFlex{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx 4%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.saveBtn{
			color: #666;
			font-size: 60rpx;
		}
		.icon-w_aixin{
			color: #6487fe;
		}
		.ctrlGroup{
			flex: 1;
			width: 100rpx;
			display: flex;
			margin-left: 30rpx;
			align-items: center;
			justify-content: space-between;
			.ctrlBtn{
				width: 48%;
				text-align: center;
				box-sizing: border-box;
				padding: 20rpx;
				font-size: 24rpx;
				// background-color: #f8f8f8;
				border: 1px solid #3f55cc;
				color: #3f55cc;
				border-radius: 10rpx;
			}
			.fullBtn{
				width: 100%;
			}
			.has_bg{
				border: none;
				padding: 22rpx ;
				// background-color: #3f55cc;
				background-image: linear-gradient(to right bottom,#9ecffd,#3f55cc);
				color: #fff;
			}
		}
	}
	
</style>
